<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j con-box component-uc-account">
    <div class="box-tit">
      {{ $t('ucAccount.accountInformation') }}
    </div>
    <div :class="['box-content','account',$t('language') === 'en'?'en':'']">
      <div class="item">
        <div class="tit">
          {{ $t('ucAccount.memberAvatar') }}：
        </div>

        <div class="user-img">
          <pic-upload
            v-model="dataForm.avatarUrl"
            :full-url="true"
          />
        </div>
      </div>

      <!-- 用户名 -->
      <div
        v-if="dataForm.username"
        class="item"
      >
        <div class="tit">
          {{ $t('chat.userName') }}：
        </div>
        <span>{{ dataForm.username }}</span>
      </div>
      <!-- 会员昵称 -->
      <div :class="['item', errorTips === 3 ? 'error' : '']">
        <div class="tit">
          <span class="asterisk">*</span>{{ $t('ucAccount.memberNickname') }}：
        </div>
        <input
          v-model="dataForm.nickName"
          type="text"
          class="text"
          maxlength="15"
          :placeholder="$t('ucAccount.maximumCharacters')"
        >
        <div
          v-if="errorTips === 3"
          class="error-text"
        >
          {{ $t('ucAccount.memberCannotEmpty') }}
        </div>
      </div>
      <div class="item">
        <div class="tit">
          {{ $t('ucAccount.memberGender') }}：
        </div>
        <div class="gender">
          <el-radio
            v-model="dataForm.sex"
            label="0"
          >
            {{ $t('ucAccount.man') }}
          </el-radio>
          <el-radio
            v-model="dataForm.sex"
            label="1"
          >
            {{ $t('ucAccount.woman') }}
          </el-radio>
        </div>
      </div>
      <div class="item">
        <div class="tit">
          {{ $t('ucAccount.verifiedMobile') }}：
        </div>
        <div class="phone-number">
          {{ mobile }}
        </div>
      </div>
      <div class="item">
        <div class="tit">
          {{ $t('ucPassword.birthDate') }}：
        </div>
        <el-date-picker
          v-model="dataForm.birthDate"
          type="date"
          :placeholder="$t('ucPassword.selectBirthDate')"
          :disabled-date="pickerOptions.disabledDate"
          size="small"
          value-format="YYYY-MM-DD"
          class="birthDate"
          popper-class="con-box-picker-popper"
        />
      </div>
      <div class="item">
        <div class="tit">
          &nbsp;
        </div>
        <a
          href="javascript:void(0)"
          class="btn"
          @click="updateUserInfo()"
        >{{ $t('ucAccount.saveAccount') }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()

const pickerOptions = reactive({
  // 设置禁用状态，参数为当前日期
  disabledDate: (time) => {
    return time.getTime() >= new Date().getTime()
  }
})
const dataForm = reactive({
  avatarUrl: '',
  nickName: '',
  userMobile: '',
  sex: '',
  auth: {},
  username: '',
  birthDate: ''
})

const errorTips = ref(0)
onMounted(() => {
  // 设置网页标题
  document.title = $t('ucAccount.accountInformation')
  getUserInfo()
})

const mobile = ref('')
/**
* 获取用户信息
*/
const getUserInfo = () => {
  http.get('/p/user/userInfo', {
  }).then(({ data }) => {
    dataForm.userMobile = data.userMobile
    dataForm.avatarUrl = data.pic
    if (data.sex === '0' || data.sex === '1') {
      dataForm.sex = data.sex
    } else {
      dataForm.sex = '0'
    }
    mobile.value = data.mobile
    dataForm.nickName = data.nickName
    dataForm.username = data.username
    dataForm.birthDate = data.birthDate
    const user = {
      nickName: data.nickName,
      userAvatar: data.pic
    }
    userStore.setUser(user)
  })
}

/**
* 修改用户信息
*/
const updateUserInfo = () => {
  if (!dataForm.nickName.trim()) {
    errorTips.value = 3
    return
  }
  http.put('/p/user/setUserInfo', dataForm).then(() => {
    ElMessage({
      message: $t('ucAccount.successfullyModified'),
      type: 'success',
      duration: 1000,
      onClose: () => {
        getUserInfo()
        setTimeout(() => {
          router.push({
            path: '/user-center',
            query: {
              refresh: true,
              currentPage: 'index'
            }
          })
        }, 1000)
      }
    })
    // }
  })
}

</script>

<style lang="scss" scoped>
@use "../common/scss/user-center";
</style>
<style lang="scss" scoped>
@use "../common/scss/uc-edit";
</style>

<style lang="scss" scoped>
.component-uc-account {
  .gender {
    &:deep(.el-radio__input.is-checked) {
      .el-radio__inner {
        border-color: #e1251b;
        background: #e1251b;
      }
    }
    &:deep(.el-radio__input.is-checked+.el-radio__label) {
      color: #e1251b;
    }
  }
  &:deep(.con-box-picker-popper) {
    .el-picker-panel__body {
      .el-picker-panel__content {
        .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
          color: #fff;
          background-color: #e1251b;
        }
      }
    }
  }

  &:deep(.birthDate) {
    width: 300px;
    height: 30px;
    .el-input__wrapper {
      box-shadow: 0 0 0 1px #EEE;
      width: 286px;
      padding: 1px 7px;
      height: 30px;
      border-radius: 0;
      border: 0;
      &:hover {
        box-shadow: 0 0 0 1px #EEE;
      }
    }
    .el-input__wrapper.is-focus {
      box-shadow: 0 0 0 1px #EEE;
    }
  }
}

</style>
